<style lang="scss">

  @import "../../assets/css/variable";

  $dark: #494e60;
  $dark-red: #725263;
  $red: #b9636f;
  $orange: #fc8272;
  $light-orange: #fcaa6a;

  .star-moon-sun {
    position: relative;
    width: 100%;
    height: 100%;
    .x-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(140deg, $dark 25%, $dark-red 45%, $red 60%, $orange 80%, $light-orange 100%);
      z-index: 0;
    }
    .x-object {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 100;
    }
    .sun {
      position: absolute;
      top: 50%;
      right: 15%;
      width: 100px;
      height: 100px;
    }
  }


</style>
<template>
  <div class="star-moon-sun">
    <div class="x-bg"></div>
    <div class="x-object">
      <svg class="sun" width="100" height="100">
        <defs>
          <linearGradient id="svg_6" y2="0" x2="0.76099" y1="1" x1="1">
            <stop offset="0" stop-color="rgb(186,99,111)"></stop>
            <stop offset="0" stop-color="rgb(249,130,114)"></stop>
            <stop offset="1" stop-color="rgb(249,157,71)"></stop>
          </linearGradient>
        </defs>
        <g>
          <ellipse ry="50" rx="50" id="circle" cy="50" cx="50" stroke-width="0"
                   fill="url(#svg_6)"></ellipse>
        </g>
      </svg>
      <svg class="cloud-1" width="100" height="100">
        <g>
          <title>Layer 1</title>
          <circle id="svg_25" r="16.57597" cy="23.62638" cx="48.25175" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"></circle>
          <circle id="svg_26" r="16.77794" cy="31.36863" cx="58.24176" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"/>
          <circle id="svg_27" r="11.66096" cy="48.35165" cx="67.73227" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"/>
          <circle id="svg_28" r="10.26714" cy="53.34666" cx="74.97503" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"/>
          <circle id="svg_29" r="16.37151" cy="32.11788" cx="21.52847" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"/>
          <circle id="svg_30" r="15.03696" cy="48.85115" cx="15.78422" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"/>
          <circle id="svg_31" r="15.67668" cy="40.60939" cx="28.02198" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"/>
          <circle id="svg_33" r="17.4468" cy="48.35165" cx="34.76524" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"/>
          <circle id="svg_36" r="0.24975" cy="60.33966" cx="69.98002" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"/>
          <circle id="svg_37" r="9.02563" cy="54.09591" cx="54.99501" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"/>
          <circle id="svg_38" r="0.24975" cy="38.36164" cx="80.46953" stroke-linecap="null" stroke-linejoin="null"
                  stroke-dasharray="null" stroke-width="0" fill="white"/>
        </g>
      </svg>
      <svg class="cloud-2" width="100" height="100">
        <g>
          <title>Layer 1</title>
          <path stroke="#000000" id="svg_55"
                d="m60.57794,0.5829c-0.21277,0.00497 -0.41838,0.01822 -0.63202,0.03395c-3.41831,0.25159 -6.43533,1.85456 -7.96802,4.24309l-0.81261,1.80756c0.17531,-0.62641 0.4445,-1.23391 0.81261,-1.80756c-2.73334,-2.09258 -6.56985,-3.05843 -10.36068,-2.60526c-3.79083,0.45317 -7.083,2.2706 -8.88219,4.90501c-5.07916,-2.3115 -11.41043,-2.17151 -16.30848,0.36491c-4.89804,2.53641 -7.50869,7.02734 -6.71525,11.55818l0.51916,1.8415c-0.2346,-0.6033 -0.40981,-1.21704 -0.51916,-1.8415l-0.079,0.16972c-4.25767,0.34285 -7.74949,2.78385 -8.65647,6.05065c-0.90698,3.2668 0.97896,6.61875 4.67246,8.30797l5.76722,1.03532c-2.01376,0.12248 -4.02424,-0.23817 -5.76722,-1.03532c-2.84893,2.35808 -3.5045,5.84917 -1.6252,8.73228c1.8793,2.88311 5.8928,4.54322 10.03338,4.16671l2.51681,-0.4922c-0.80979,0.25046 -1.65082,0.41345 -2.51681,0.4922c2.35057,3.19743 6.24813,5.52985 10.82341,6.45798c4.57528,0.92814 9.435,0.3796 13.48694,-1.51902c3.30558,3.85192 9.17251,5.87509 15.05572,5.19354c5.88321,-0.68155 10.73627,-3.94981 12.4599,-8.38434l0.59816,-2.47797c-0.08957,0.84184 -0.28392,1.66949 -0.59816,2.47797c4.04655,1.96084 9.13664,2.07134 13.31765,0.28853c4.18101,-1.78281 6.78984,-5.1824 6.82812,-8.88503l-1.49892,-5.53226l-5.90479,-3.74314c4.56589,2.1134 7.44445,5.33338 7.40371,9.2754c5.42908,0.04204 10.04068,-3.39543 12.11003,-7.34054c2.06935,-3.94511 1.28655,-8.44277 -2.05409,-11.82125c1.38564,-2.51543 1.30343,-5.37671 -0.22571,-7.84123c-1.52915,-2.46453 -4.34979,-4.29628 -7.7423,-5.01533c-0.7592,-3.26642 -3.88863,-5.89391 -8.02444,-6.755c-4.13581,-0.86109 -8.5397,0.20071 -11.30871,2.73255l-1.68164,2.09609c0.4297,-0.75799 0.9909,-1.46452 1.68164,-2.09609c-1.95194,-1.98984 -5.01349,-3.11264 -8.20503,-3.03805l0.00001,-0.00001z"
                stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0"
                fill="#ffffff"/>
        </g>
      </svg>
      <img class="cloud-3" src="../../assets/img/star-moon-sun/cloud3.svg">
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        count: 0
      }
    },
    computed: {},
    methods: {},
    mounted() {
    }
  }
</script>
